<script setup>
import { onMounted } from 'vue'

import usePageStore from '/src/stores/page/index.js'

import MyHeader from '/src/components/home/MyHeader.vue'

import Revise from '/src/components/revise/OriginDataset.vue'
import Train from '/src/components/revise/TrainDataset.vue'
import UploadDataset from '/src/components/revise/UploadDataset.vue'


const usePage = usePageStore();


/**
 * 获取右侧的参数列表，动态的后端传值，前端渲染
 * @returns {Promise<void>}
 */
const getData = async () => {
  // 加载右侧的参数列表
  await useParam.getParams()
}

/**
 * 进来加载数据
 */
onMounted(() => {
  // getData()
})
</script>

<template>
  <div class='main'>
    <my-header></my-header>

    <!--  校正页面  -->
    <div v-if='usePage.pageName === "originDataset"'>
      <Revise />
    </div>
    <div v-else-if='usePage.pageName === "trainDataset"'>
      <Train />
    </div>
    <div v-else-if='usePage.pageName === "uploadDataset"'>
      <UploadDataset />
    </div>
  </div>
</template>
<style scoped lang='less'>
.main {
  background-color: #000000;
  height: 100%;

  .header-wrapper {
    height: 60px;
    padding: 0 16px;
    background-color: #232324;
    display: flex;
    align-items: center;
  }

  .body-wrapper {
    width: 100%;
    height: calc(100% - 60px);
    padding: 16px;
    display: flex;
    gap: 16px;

    .question-list-wrapper {
      max-width: 360px;
      width: 20%;
      padding: 16px;
      background-color: #171717;
    }

    .content-wrapper {
      flex: 1;
      display: flex;

      .parameter-wrapper {
        //max-width: 300px;
        width: 20%;
        padding: 24px;
        background-color: #171717;
        border-left: 1px solid #ffffff1a;
      }

      .dialogue-wrapper {
        //flex: 1;
        background-color: #171717;
        width: 80%;
      }
    }
  }
}
</style>


